import React from "react"
import { Card, message, Popconfirm } from "antd"
import styles from "./index.module.scss"
import Breadcrumb from "@/components/Breadcrumb/Breadcrumb"
import {
  Form,
  Button,
  Radio,
  DatePicker,
  Table,
  Space,
  Image,
  Tag,
} from "antd";
import { getChannelList } from "@/store/actions/channel";
import { getArticleList ,delArticle } from "@/store/actions/article";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
import img from "@/assets/error.png";
import { STATUS } from "@/utils/STATUS";
import { useRef } from "react";
import history from "@/utils/history"
import MyChannels from '@/components/MyChannels/MyChannels'


const { RangePicker } = DatePicker;
const Article = () => {
  const dispatch = useDispatch();
  // 页面加载发出请求
  useEffect(() => {
    dispatch(getChannelList());
    dispatch(getArticleList());
  }, [dispatch]);
  // 拿出频道数据

  //   表格数据
  const {
    page,
    per_page,
    total_count,
    results: dataSource,
  } = useSelector((state) => state.article);
  const columns = [
    {
      title: "封面",
      dataIndex: "cover",
      render(cover) {
        if (cover.type === 0) {
          return <Image width={200} height={150} src={img}></Image>;
        } else {
          return (
            <Image
              width={200}
              height={150}
              src={cover.images[0]}
              fallback={img}
            ></Image>
          );
        }
      },
    },
    {
      title: "标题",
      dataIndex: "title",
    },
    {
      title: "状态",
      dataIndex: "status",
      render(status) {
        const index = STATUS.findIndex((item) => item.id === status);
        return <Tag color={STATUS[index].color}> {STATUS[index].title} </Tag>;
      },
    },
    {
      title: "发布时间",
      dataIndex: "pubdate",
    },
    {
      title: "阅读数",
      dataIndex: "read_count",
    },
    {
      title: "评论数",
      dataIndex: "comment_count",
    },
    {
      title: "点赞数",
      dataIndex: "like_count",
    },
    {
      title: "操作",
      render(row) {
        return (
          <Space>
            <Button
              type="primary"
              shape="circle"
              onClick={ () => history.push('/Layout/articlepublish/'+ row.id) } 
              icon={<EditOutlined />}
            ></Button>
            <Popconfirm
              title="确定删除吗"
              onConfirm={() => {
                delConfirm(row.id);
              }}
              onCancel={delCancel}
              okText="确定"
              cancelText="取消"
            >
              <Button
                type="primary"
                shape="circle"
                danger
                icon={<DeleteOutlined />}
              ></Button>
            </Popconfirm>
          </Space>
        );
      },
    },
  ];
  const ref = useRef({});
  // 提交事件
  const onFinish = (values) => {
    const params = ref.current;
    params.status = values.status === -1 ? null : values.status;
    params.channel_id = values.channel_id;
    if (values.date) {
      params.begin_pubdate = values.date[0]
        .startOf("day")
        .format("YYYY-MM-DD HH:mm:ss");
      params.end_pubdate = values.date[1]
        .endOf("day")
        .format("YYYY-MM-DD HH:mm:ss");
    }
    dispatch(getArticleList(params));
  };
  // 翻页事件
  const onChangePage = (pageVal, pageSizeVal) => {
    const params = ref.current;
    params.page = pageVal;
    params.per_page = pageSizeVal;
    dispatch(getArticleList(params));
  };

  // 删除事件
  const delConfirm = async (id) => {
    const params = ref.current
   await delArticle(id)
    dispatch(getArticleList(params)) 
    message.success('删除成功')
  }
  const delCancel = ()=>{
   message.success('已取消')
  }
  return (
    <div className={styles.article}>
      {/* 表单 */}
      <Card title={<Breadcrumb text="内容管理" />} className="form">
        <Form initialValues={{ status: -1 }} onFinish={onFinish}>
          {/* 状态 */}
          <Form.Item label="状态" name="status">
            <Radio.Group>
              {STATUS.map((item) => (
                <Radio key={item.id} value={item.id}>
                  {item.title}
                </Radio>
              ))}
            </Radio.Group>
          </Form.Item>
          {/* 频道 */}
          <Form.Item label="频道" name="channel_id">
          <MyChannels/>
          </Form.Item>
          {/* 日期 */}
          <Form.Item label="日期" name="date">
            <RangePicker />
          </Form.Item>
          {/* 按钮 */}
          <Form.Item>
            <Button type="primary" htmlType="submit">
              筛选
            </Button>
          </Form.Item>
        </Form>
      </Card>
      {/* 表格 */}
      <Card
        className="table"
        title={`根据筛选条件共查询到${total_count}条数据`}
      >
        <Table
          rowKey="id"
          pagination={{
            total: total_count,
            current: page,
            pageSize: per_page,
            onChange: onChangePage,
          }}
          dataSource={dataSource}
          columns={columns}
        />
      </Card>
    </div>
  );
};
export default Article;
